<template>
	<view class="">
		<view class="d-flex flex-wrap a-center j-sb pl15 pr15">
			<view class="mb15" v-for="(item, index) in oneBuildKtzk" :key="index" @click="popupOpenKtkzq(item, index, '0')">
				<view class="content_item p15 boxSizing" :class="classroomDataBgColor[item.socketColor]">
					<view class="d-flex a-center j-sb">
						<view class="d-flex-center">
							<image style="width: 36px; height: 36px;" mode="aspectFill" src="/static/img/feature/children/kt.png">
							</image>
						</view>
						<view class="">
							<view class="rowValue">{{item.airTmp}} °C</view>
						</view>
					</view>
					<view class="mt10">
						<view class="rowName">{{index==0 ? '1号楼南空调': '1号楼北空调'}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="d-flex flex-wrap a-center j-sb pl15 pr15">
			<view class="mb15" v-for="(item, index) in oneBuildKg" :key="index" @click="popupOpen(item, index, '1')">
				<view class="content_item p15 boxSizing" :class="classroomDataBgColor[item.socketColor]">
					<view class="d-flex">
						<view class="d-flex-center">
							<u--image :showLoading="true" src="http://36.138.43.18:8081/upload/799320245027135044.png" width="36px"
								height="36px"></u--image>
						</view>
					</view>
					<view class="mt10">
						<view class="rowName">{{index==0 ? '1号楼南空调开关': '1号楼北空调开关'}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="d-flex flex-wrap a-center j-sb pl15 pr15">
			<view class="mb15" v-for="(item, index) in oneBuildZm" :key="index" @click="popupOpen(item, index, '2')">
				<view class="content_item p15 boxSizing" :class="classroomDataBgColor[item.socketColor]">
					<view class="d-flex">
						<view class="d-flex-center">
							<u--image :showLoading="true" src="http://36.138.43.18:8081/upload/881920244927134952.png" width="36px"
								height="36px"></u--image>
						</view>
					</view>
					<view class="mt10">
						<view class="rowName">{{index==0 ? '1号楼南照明': '1号楼北照明'}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="d-flex flex-wrap a-center j-sb pl15 pr15">
			<view class="mb15" v-for="(item, index) in oneBuildCz" :key="index"
				@click="popupOpen(item, classroomData[index], index, '3')">
				<view class="content_item p15 boxSizing" :class="classroomDataBgColor[item.socketColor]">
					<view class="d-flex">
						<view class="d-flex-center">
							<u--image :showLoading="true" src="http://36.138.43.18:8081/upload/269120244927134923.png" width="36px"
								height="36px"></u--image>
						</view>
					</view>
					<view class="mt10">
						<view class="rowName">{{index==0 ? '1号楼插座1': '1号楼插座2'}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="d-flex flex-wrap a-center j-sb pl15 pr15">
			<view class="mb15" v-for="(item, index) in twoBuildKtzk" :key="index" @click="popupOpenKtkzq(item, index, '4')">
				<view class="content_item p15 boxSizing" :class="classroomDataBgColor[item.socketColor]">
					<view class="d-flex a-center j-sb">
						<view class="d-flex-center">
							<image style="width: 36px; height: 36px;" mode="aspectFill" src="/static/img/feature/children/kt.png">
							</image>
						</view>
						<view class="">
							<view class="rowValue">{{item.airTmp}} °C</view>
						</view>
					</view>
					<view class="mt10">
						<view class="rowName">{{index==0 ? '2号楼南空调': '2号楼北空调'}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="d-flex flex-wrap a-center j-sb pl15 pr15">
			<view class="mb15" v-for="(item, index) in twoBuildKg" :key="index" @click="popupOpen(item, index, '5')">
				<view class="content_item p15 boxSizing" :class="classroomDataBgColor[item.socketColor]">
					<view class="d-flex">
						<view class="d-flex-center">
							<u--image :showLoading="true" src="http://36.138.43.18:8081/upload/799320245027135044.png" width="36px"
								height="36px"></u--image>
						</view>
					</view>
					<view class="mt10">
						<view class="rowName">{{index==0 ? '2号楼南空调开关': '2号楼北空调开关'}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="d-flex flex-wrap a-center j-sb pl15 pr15">
			<view class="mb15" v-for="(item, index) in twoBuildZm" :key="index" @click="popupOpen(item, index, '6')">
				<view class="content_item p15 boxSizing" :class="classroomDataBgColor[item.socketColor]">
					<view class="d-flex">
						<view class="d-flex-center">
							<u--image :showLoading="true" src="http://36.138.43.18:8081/upload/881920244927134952.png" width="36px"
								height="36px"></u--image>
						</view>
					</view>
					<view class="mt10">
						<view class="rowName">{{index==0 ? '2号楼南照明': '2号楼北照明'}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="d-flex flex-wrap a-center j-sb pl15 pr15">
			<view class="mb15" v-for="(item, index) in twoBuildCz" :key="index" @click="popupOpen(item, index, '7')">
				<view class="content_item p15 boxSizing" :class="classroomDataBgColor[item.socketColor]">
					<view class="d-flex">
						<view class="d-flex-center">
							<u--image :showLoading="true" src="http://36.138.43.18:8081/upload/269120244927134923.png" width="36px"
								height="36px"></u--image>
						</view>
					</view>
					<view class="mt10">
						<view class="rowName">{{index==0 ? '2号楼插座1': '2号楼插座2'}}</view>
					</view>
				</view>
			</view>
		</view>

		<u-picker :show="pickerShow" :title="pickerTitle" ref="uPicker" :columns="pickerColumns" :defaultIndex="[0,0]"
			keyName="commandName" @confirm="pickerConfirm" @close="closePicker" @cancel="closePicker"
			@change="changeHandler"></u-picker>

		<u-modal :show="modalShow1" :title="modalTitle1" :content='modalContent1' :showConfirmButton="true"
			:showCancelButton="true" @confirm="modalConfirm" @cancel="modalShow1 = false"></u-modal>
	</view>
</template>

<script>
	import {
		queryThreeListControlByStatus,
		queryThreeListControlByStatusV2,
		queryFourListControlByStatus,
		queryFiveListControlByStatus,
		querySixListControlByStatus,
		querySixListControlByStatusV2,
		querySevenListControlByStauts,
		queryEightListControlByStauts
	} from "@/api/dormBuilding/noonBreak.js"
	import {
		queryControlListByApp,
		makeDeviceControlByApp,
		queryControlListV3ByApp,
		batchControlByApp
	} from "@/api/index.js"

	export default {
		data() {
			return {
				userInfo: {},
				timeout: [],

				oneBuildKtzk: [],
				oneBuildKg: [],
				oneBuildZm: [],
				oneBuildCz: [],

				twoBuildKtzk: [],
				twoBuildKg: [],
				twoBuildZm: [],
				twoBuildCz: [],

				classroomDataBgColor: ['bgColor_info', 'bgColor_success', 'bgColor_danger', 'bgColor_blue',
					'bgColor_warning', 'bgColor_red', 'bgColor_orange'
				],

				modalShow1: false,
				modalTitle1: "",
				modalContent1: "",
				apiObj: {},

				pickerShow: false,
				pickerTitle: "",
				pickerColumns: [],
				allColumnData: [],

				type: ""
			}
		},
		created() {
			this.userInfo = uni.getStorageSync('userInfo')
		},
		mounted() {
			this.queryThreeListControlByStatus()
			this.queryThreeListControlByStatusV2()
			this.queryFourListControlByStatus()
			this.queryFiveListControlByStatus()

			this.querySixListControlByStatus()
			this.querySixListControlByStatusV2()
			this.querySevenListControlByStauts()
			this.queryEightListControlByStauts()

			this.setupTimer()
		},
		methods: {
			// 设置定时器
			setupTimer() {
				let _this = this;
				_this.timeout[0] = setInterval(() => {
					_this.queryThreeListControlByStatus()
					_this.queryThreeListControlByStatusV2()
					_this.queryFourListControlByStatus()
					_this.queryFiveListControlByStatus()

					_this.querySixListControlByStatus()
					_this.querySixListControlByStatusV2()
					_this.querySevenListControlByStauts()
					_this.queryEightListControlByStauts()
				}, 15000);
			},
			// 清除定时器
			clearTimer() {
				let _this = this;
				if (_this.timeout.length > 0) {
					_this.timeout.forEach(item => {
						clearInterval(item);
					})
				}
			},

			queryThreeListControlByStatus() {
				queryThreeListControlByStatus().then(res => {
					this.oneBuildKtzk = res.object
				})
			},
			queryThreeListControlByStatusV2() {
				queryThreeListControlByStatusV2().then(res => {
					this.oneBuildKg = res.object
				})
			},
			queryFourListControlByStatus() {
				queryFourListControlByStatus().then(res => {
					this.oneBuildZm = res.object
				})
			},
			queryFiveListControlByStatus() {
				queryFiveListControlByStatus().then(res => {
					this.oneBuildCz = res.object
				})
			},
			querySixListControlByStatus() {
				querySixListControlByStatus().then(res => {
					this.twoBuildKtzk = res.object
				})
			},
			querySixListControlByStatusV2() {
				querySixListControlByStatusV2().then(res => {
					this.twoBuildKg = res.object
				})
			},
			querySevenListControlByStauts() {
				querySevenListControlByStauts().then(res => {
					this.twoBuildZm = res.object
				})
			},
			queryEightListControlByStauts() {
				queryEightListControlByStauts().then(res => {
					this.twoBuildCz = res.object
				})
			},


			// 空调控制器
			popupOpenKtkzq(data, roomName, type) {
				this.type = type
				if (type == 0) {
					this.pickerTitle = roomName == 0 ? '1号楼南空调' : '1号楼北空调'
				} else {
					this.pickerTitle = roomName == 0 ? '2号楼南空调' : '2号楼北空调'
				}

				this.dataItem = data
				this.pickerColumns = []
				this.allColumnData = []

				this.queryControlListByApp(data)
				this.clearTimer()

				this.pickerShow = true
			},
			closePicker() {
				this.pickerShow = false
				this.setupTimer()
			},

			async queryControlListByApp(data) {
				await queryControlListByApp({
					deviceCode: data.deviceCode
				}).then(res => {
					let tempData = res.object || []

					let arrData = []
					let arrOneData = [
						[],
						[]
					]
					let arrTwoData = [
						[],
						[],
						[],
					]
					for (var i = 0; i < tempData.length; i++) {
						let obj = {
							commandName: tempData[i].name,
							command: (new Date().getTime()).toString(),
							parameterCode: (new Date().getTime()).toString(),
						}
						arrOneData[0].push(obj)

						if (i == 0) {
							for (var j = 0; j < tempData[i].list.length; j++) {
								let obj = {
									commandName: tempData[i].list[j].commandName,
									command: tempData[i].list[j].command,
									parameterCode: tempData[i].list[j].parameterCode
								}
								arrOneData[1].push(obj)
								arrTwoData[0].push(obj)
							}
						}
						if (i == 1) {
							for (var j = 0; j < tempData[i].list.length; j++) {
								let obj = {
									commandName: tempData[i].list[j].commandName,
									command: tempData[i].list[j].command,
									parameterCode: tempData[i].list[j].parameterCode
								}
								arrTwoData[1].push(obj)
							}
						}
						if (i == 2) {
							for (var j = 0; j < tempData[i].list.length; j++) {
								let obj = {
									commandName: tempData[i].list[j].commandName,
									command: tempData[i].list[j].command,
									parameterCode: tempData[i].list[j].parameterCode
								}
								arrTwoData[2].push(obj)
							}
						}
					}

					this.pickerColumns = arrOneData
					this.allColumnData = arrTwoData
				})
			},

			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e

				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.allColumnData[index])
				}
			},
			pickerConfirm(e) {
				let that = this
				let obj = {
					userCode: this.userInfo.userCode,
					userName: this.userInfo.userName,
					deviceCode: this.dataItem.deviceCode,
					parameterCode: e.value[1].parameterCode,
					command: e.value[1].command,
					commandName: e.value[1].commandName,
				}
				that.pickerShow = false
				this.setupTimer()

				makeDeviceControlByApp(obj).then(res => {
					if (res.status == 200 && (res.message == '指令发送成功' || res.message == '指令发送成功等待核验')) {
						that.$refs.uToast.show({
							type: 'loading',
							title: '正在加载',
							message: "正在加载",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png',
							duration: 2000,
							complete() {
								if (that.type == 0) {
									that.queryThreeListControlByStatus()
								} else {
									that.querySixListControlByStatus()
								}

								uni.showToast({
									duration: 1000,
									icon: "success",
									title: "指令发送成功"
								})
							}
						})
					}
				})
			},

			// 开关和分闸
			popupOpen(data, roomName, type) {
				this.type = type

				this.dataItem = data

				let tempTitle = ""
				switch (type) {
					case '1':
						tempTitle = roomName == 0 ? '1号楼南空调开关' : '1号楼北空调开关'
						break;
					case "2":
						tempTitle = roomName == 0 ? '1号楼南照明' : '1号楼北照明'
						break;
					case '3':
						tempTitle = roomName == 0 ? '1号楼插座1' : '1号楼插座2'
						break;
					case "5":
						tempTitle = roomName == 0 ? '2号楼南空调开关' : '2号楼北空调开关'
						break;
					case '6':
						tempTitle = roomName == 0 ? '2号楼南照明' : '2号楼北照明'
						break;
					case "7":
						tempTitle = roomName == 0 ? '2号楼插座1' : '2号楼插座2'
						break;
					default:
						tempTitle = '设备'
						break;
				}
				this.modalTitle1 = tempTitle

				let obj = {}
				if (data.deviceList[data.deviceList.length - 2].deviceValue == '0') {
					obj = {
						command: '65365',
						commandName: '合闸',
						parameterCode: 'CTRL',
					}
					this.modalContent1 = "确定执行合闸操作吗, 是否继续?"
				} else {
					obj = {
						command: '65280',
						commandName: '分闸',
						parameterCode: 'CTRL',
					}
					this.modalContent1 = "确定执行分闸操作吗, 是否继续?"
				}
				this.apiObj = obj

				this.modalShow1 = true
			},

			modalConfirm(e) {
				let that = this

				let obj = {
					userCode: this.userInfo.userCode,
					userName: this.userInfo.userName,
					deviceCode: this.dataItem.deviceCode,
					parameterCode: this.apiObj.parameterCode,
					command: this.apiObj.command,
					commandName: this.apiObj.commandName,
				}

				that.modalShow1 = false

				makeDeviceControlByApp(obj).then(res => {
					if (res.status == 200 && (res.message == '指令发送成功' || res.message == '指令发送成功等待核验')) {

						that.$refs.uToast.show({
							type: 'loading',
							title: '正在加载',
							message: "正在加载",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png',
							duration: 2000,
							complete() {
								if (that.type == 1) {
									that.queryThreeListControlByStatusV2()
								} else if (that.type == 2) {
									that.queryFourListControlByStatus()
								} else if (that.type == 3) {
									that.queryFiveListControlByStatus()
								} else if (that.type == 5) {
									that.querySixListControlByStatusV2()
								} else if (that.type == 6) {
									that.querySevenListControlByStauts()
								} else {
									that.queryEightListControlByStauts()
								}

								uni.showToast({
									duration: 1000,
									icon: "success",
									title: "指令发送成功"
								})
							}
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bgColor_info {
		background: #787878;
	}

	.bgColor_success {
		background: #1BBC7C;
	}

	.bgColor_danger {
		background: #AD5679;
	}

	.bgColor_blue {
		background: #5589F2;
	}

	.bgColor_warning {
		background: #E8CB58;
	}

	.bgColor_red {
		background: #E14B4B;
	}

	.bgColor_orange {
		background: #E46F1C;
	}

	.content_item {
		width: 334rpx;
		border-radius: 16rpx;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);

		.icon-kaiguan-kai {
			color: #5589F2;
		}

		.rowName {
			font-size: 32upx;
			color: #ffffff;
			font-family: Source Han Sans CN, Source Han Sans CN-400;
		}

		.rowValue {
			font-size: 28upx;
			color: #ffffff;
		}
	}
</style>